<template>
  <div>
    <el-dialog class="application-choose-dialog" title="分配人员" :close-on-click-modal="closeOnclickModal"
      :visible.sync="isDialogShow" width="50%" @close="closeDialog">
      <div class="choose-dialog-content">
        <div class="left">
          <el-form ref="treeSearchForm" :inline="true" :model="treeSearchForm" :size="size">
            <el-form-item prop="keyword">
              <el-input v-model="treeSearchForm.keyword" placeholder="请输入关键词" clearable>
                <el-button slot="append" :size="size" icon="el-icon-search" @click="getOrgTree" />
              </el-input>
            </el-form-item>
          </el-form>
          <el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" @check="selectChange" :check-strictly="true"
            :highlight-current="true" :load="loadNode" lazy show-checkbox>
          </el-tree>
        </div>
        <div class="right">
          <div class="title">已分配人员</div>
          <ul class="selected">
            <li class="selected-item" v-for="(item, index) in selectedList" :key="index">
              <span>{{item.fullName}}</span>
              <span class="el-icon-close selected-icon" @click="deleteSelect(index)"></span>
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="closeDialog">取消</el-button>
        <el-button type="primary" :size="size" @click="choose">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import api from '@/utils/api.js'
  export default {
    name: 'orgDialogSelect',
    components: {

    },
    props: {
      isDialogOrgShow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        isDialogShow: false,
        treeSearchForm: {
          parentId: 0,
          keyword: ''
        },
        treeList: [],
        selectedList: [],
        defaultProps: {
          children: 'children',
          label: 'fullName',
          isLeaf: 'leaf'
        }
      }
    },
    computed: {
      ...mapGetters(['size', 'closeOnclickModal']),
    },
    watch: {
      isDialogOrgShow (newValue) {
        this.isDialogShow = newValue
      }
    },
    methods: {
      selectChange (data, node) {
        this.selectedList = node.checkedNodes
      },
      deleteSelect (index) {
        this.selectedList.splice(index, 1)
        this.$refs.tree.setCheckedNodes(this.selectedList)
      },
      // 清空已选数据
      clearSelect () {
        this.selectedList = []
        this.$refs.tree.setCheckedNodes(this.selectedList)
      },
      closeDialog () {
        this.$emit('update:isDialogOrgShow', false)
      },
      getOrgTree () {
        const params = this.treeSearchForm
        api.getCompanysById(params).then(res => {
          this.treeList = res.data
        })
      },
      loadNode (node, resolve) {
        this.treeSearchForm.parentId = node.data.id || 0
        const params = this.treeSearchForm
        api.getCompanysById(params).then(res => {
          let data = res.data.map(item => {
            item.leaf = item.leaf === 0 ? false : true
            return item
          })
          resolve(data)
        })
      },
      choose () {
        this.$emit('choose', this.selectedList)
        this.closeDialog()
      },
      setSelectedList (list) {
        this.selectedList = list.slice()
        const ids = this.selectedList.map(item => item.id)
        this.$refs.tree.setCheckedKeys(ids)
      }
    }
  }
</script>
<style lang="scss">
  .application-choose-dialog {
      .el-dialog {
        min-width: 700px;
      }
      .choose-dialog-content {
        display: flex;
        height: 450px;
        .left {
          padding-right: 15px;
          border-right: 1px solid #dedede;
          overflow: auto;
        }

        .right {
          padding: 8px 10px 0 15px;
          flex-grow: 1;
          overflow: auto;
          .selected{
            .selected-item{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 15px;
              .selected-icon{
                cursor: pointer;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
</style>
